import React from 'react';
import { Tooltip } from 'antd';
import { SyncOutlined, CheckCircleOutlined, CloseCircleOutlined, ClockCircleOutlined } from '@ant-design/icons';

const StatusBadge = ({ status, taskId }) => {
  const renderIcon = () => {
    switch (status) {
      case 'pending':
        return <ClockCircleOutlined style={{ color: '#faad14' }} />;
      case 'running':
        return <SyncOutlined spin style={{ color: '#1890ff' }} />;
      case 'completed':
        return <CheckCircleOutlined style={{ color: '#52c41a' }} />;
      case 'failed':
        return <CloseCircleOutlined style={{ color: '#f5222d' }} />;
      default:
        return null;
    }
  };

  const renderText = () => {
    switch (status) {
      case 'running':
        return `执行中 (ID: ${taskId || 'N/A'})`;
      default:
        return status.toUpperCase();
    }
  };

  return (
    <Tooltip title={`任务ID: ${taskId || '未分配'}`}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        {renderIcon()}
        <span>{renderText()}</span>
      </div>
    </Tooltip>
  );
};

export default StatusBadge;